<html>
<head>
	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	  <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<title>个人资料</title>
<meta name="description" content="这是一个 user 页面">
  <meta name="keywords" content="user">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <link rel="icon" type="image/png" href="assets/i/favicon.png">
  <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
  <meta name="apple-mobile-web-app-title" content="Amaze UI" />
  <link rel="stylesheet" href="css/info-amazeui.min.css"/>
  <link rel="stylesheet" href="/css/info-admin.css">
  <script src="js/jquery-2.1.4.min.js"></script>
  <script src="js/jquery.min.js"></script>
</head>
<body>
<header class="am-topbar am-topbar-inverse admin-header">
  <div class="am-topbar-brand">
    <strong>食否·</strong> <small><a href="shops.html">首页</a></small>
  </div>

  <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only" data-am-collapse="{target: '#topbar-collapse'}"><span class="am-sr-only">导航切换</span> <span class="am-icon-bars"></span></button>

  <div class="am-collapse am-topbar-collapse" id="topbar-collapse">

    <ul class="am-nav am-nav-pills am-topbar-nav am-topbar-right admin-header-list">
      <li><a href="javascript:;"><span class="am-icon-envelope-o"></span> 我的订单 <span class="am-badge am-badge-warning">5</span></a></li>
      <li class="am-dropdown" data-am-dropdown>
        <a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;">
          <span class="am-icon-users"></span> 联系客服 <span class="am-icon-caret-down"></span>
        </a>
        <ul class="am-dropdown-content">
          <li><a href="#"><span class="am-icon-user"></span> 资料</a></li>
          <li><a href="#"><span class="am-icon-cog"></span> 设置</a></li>
          <li><a href="#"><span class="am-icon-power-off"></span> 退出</a></li>
        </ul>
      </li>
      <li class="am-hide-sm-only"><a href="javascript:;" id="admin-fullscreen"><span class="am-icon-arrows-alt"></span> <span class="admin-fullText">开启全屏</span></a></li>
    </ul>
  </div>
</header>

<div class="am-cf admin-main">
  <!-- sidebar start -->

  <!-- sidebar end -->

  <!-- content start -->
  <div class="admin-content">
    <div class="admin-content-body">
      <div class="am-cf am-padding am-padding-bottom-0">
        <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">个人资料</strong> / <small>Personal information</small></div>
      </div>

      <hr/>

      <div class="am-g">
        <div class="am-u-sm-12 am-u-md-4 am-u-md-push-8">
          <div class="am-panel am-panel-default">
            <div class="am-panel-bd">
              <div class="am-g">
                <div class="am-u-md-4">
                  <img class="am-img-circle am-img-thumbnail" src="http://s.amazeui.org/media/i/demos/bw-2014-06-19.jpg?imageView/1/w/200/h/200/q/80" alt=""/>
                </div>
                <div class="am-u-md-8">
                  <p>你可以使用<a href="#">系统自动</a>生成头像或者使用本地上传头像。 </p>
                  <form class="am-form">
                    <div class="am-form-group">
                      <input type="file" id="user-pic">
                      <p class="am-form-help">请选择要上传的文件...</p>
                      <button type="button" class="am-btn am-btn-primary am-btn-xs">保存</button>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>

          <div class="am-panel am-panel-default">
            <div class="am-panel-bd">
              <div class="user-info">
                <p>积分</p>
                <div class="am-progress am-progress-sm">
                  <div class="am-progress-bar" style="width: 60%"></div>
                </div>
                <p class="user-info-order">当前等级：<strong>LV8</strong> 积分：<strong>587</strong> 距离下一级别：<strong>160</strong></p>
              </div>
              <div class="user-info">
                <p>信用信息</p>
                <div class="am-progress am-progress-sm">
                  <div class="am-progress-bar am-progress-bar-success" style="width: 80%"></div>
                </div>
                <p class="user-info-order">信用等级：正常当前 信用积分：<strong>80</strong></p>
              </div>
            </div>
          </div>

        </div>
		


        <div class="am-u-sm-12 am-u-md-8 am-u-md-pull-4">
          <div class="am-form am-form-horizontal">
			  
			<div class="am-form-group">
			    <label for="user-weibo" class="am-u-sm-3 am-form-label">用户编号 / No.</label>
			    <div class="am-u-sm-9">
					<input type="text" id="customerNo" placeholder="未登录,请登录">
					
			    </div>
			</div>
			
            <div class="am-form-group">
              <label for="user-name" class="am-u-sm-3 am-form-label">姓名 / Name</label>
              <div class="am-u-sm-9">
                <input type="text" id="username" placeholder="姓名 / Name">
                <small>输入你的名字，让我们记住你。</small>
              </div>
            </div>
            
              <div class="am-form-group">
              <label for="user-email" class="am-u-sm-3 am-form-label">收货地址 / Address</label>
              <div class="am-u-sm-9">
                <input type="text" id="customerAddress" placeholder="填写你的收货地址/ Address">
                <small>告诉我们，你的商品应该送到哪里</small>
              </div>
            </div>

            <div class="am-form-group">
              <label for="user-email" class="am-u-sm-3 am-form-label">电子邮件 / Email</label>
              <div class="am-u-sm-9">
                <input type="email" id="email" placeholder="输入你的电子邮件 / Email">
                <small>给我们一个联系你的方式</small>
              </div>
            </div>

            <div class="am-form-group">
              <label for="user-phone" class="am-u-sm-3 am-form-label">电话 / Telephone</label>
              <div class="am-u-sm-9">
                <input type="tel" id="phoneNumber" placeholder="输入你的电话号码 / Telephone">
              </div>
            </div>

            <div class="am-form-group">
              <label for="user-QQ" class="am-u-sm-3 am-form-label">QQ</label>
              <div class="am-u-sm-9">
                <input type="number" pattern="[0-9]*" name="user-qq" placeholder="输入你的QQ号码">
              </div>
            </div>
			
			
            <div class="am-form-group">
              <label for="user-intro" class="am-u-sm-3 am-form-label">简介 / Intro</label>
              <div class="am-u-sm-9">
                <textarea class="" rows="5" name="user-intro" placeholder="输入个人简介"></textarea>
                <small>250字以内写出你的一生...</small>
              </div>
            </div>
           
            <div class="am-form-group">
              <div class="am-u-sm-9 am-u-sm-push-3">
				  <button id="search" class="btn btn-success">保存修改</button>
              </div>
            </div>
          </div>
        </div>
        
      </div>
    </div>

    <footer class="admin-content-footer">
      <hr>
      <p class="am-padding-left">© 2017 ShiFou, Inc. Licensed under CN license.</p>
    </footer>

  </div>
  <!-- content end -->

</div>

<a href="#" class="am-icon-btn am-icon-th-list am-show-sm-only admin-dishes" data-am-offcanvas="{target: '#admin-offcanvas'}"></a>



<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->

<!--[if (gte IE 9)|!(IE)]><!-->
<script src="assets/jquery-3.1.1.min.js"></script>
<!--<![endif]-->
<script src="assets/js/amazeui.min.js"></script>

<script src="assets/js/app.js"></script>


<!--接收Cookie里面的登录用户信息-->
<script>
window.onload=function(){
			var userno=getCookie("customerNo");
		    var username=getCookie("customerName");
			var phoneNumber=getCookie("customerPhoneNumber");
			var customerAddress=getCookie("customerAddress")
			console.log(userno)
			console.log(username)
			console.log(phoneNumber)
			console.log(customerAddress)
			document.getElementById("customerNo").value=userno;
			document.getElementById("username").value=username;
			document.getElementById("phoneNumber").value=phoneNumber;
			document.getElementById("customerAddress").value=customerAddress;	
	}
	function getCookie(cname){
		var name = cname + "=";
		var ca = document.cookie.split(';');
		for(var i=0; i<ca.length; i++) {
		    var c = ca[i].trim();
		    if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }
		}
		return "";
		
	}
	
	<!--提交修改用户信息-->
	$("#search").click(function(){
		console.log("here")
		$.ajax({
			url:'http://localhost:9523/eto/customer/update',
			data:{
				customerNo:$("#customerNo").val(),
				username:$("#username").val(),
				phoneNumber:$("#phoneNumber").val(),
				customerAddress:$('#customerAddress').val()
			},
			dataType:'json',//服务器返回json格式数据
			type:'post',//HTTP请求类型
			timeout:1000000,//超时时间设置为10秒；
			success:function(data){	//成功请求到url中的数据
				alert("信息修改成功");
				console.log(data)
				console.log($("#username").text())
				$("#username").text(data.customerName)
				if (data) {//根据返回值进行跳转
				var d = new Date();
				d.setTime(d.getTime()+(60*60));
				var expires = "expires="+d.toGMTString();
				document.cookie = "customerNo="+data.customerNo+"; "+expires;
				document.cookie = "customerName="+data.customerName+"; "+expires;
				document.cookie = "customerLevel="+data.customerLevel+"; "+expires;
				document.cookie = "customerPhoneNumber="+data.customerPhoneNumber+"; "+expires;
				document.cookie = "customerAddress="+data.customerAddress+"; "+expires;
				console.log(document.cookie)
				// window.location.href = 'shops.html';
				}
			},
			error:function(xhr,type,errorThrown){	//请求url中的数据,失败
				alert("信息修改失败");
				console.log(errorThrown)
			}
		});
	})
</script>
</body>
</html>